<!--
 * @FilePath     : /study_code/layui/9-8.html
 * @Description  : tabs 相关事件
 * @Date         : 2025-04-09 09:52:53
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-09 10:10:36
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
    <style>
      /* 自定义样式 */
      #tabBody > .xxx {
        display: none;
      }

      #tabBody > .xxx:first-child {
        display: block;
      }
    </style>
  </head>
  <body>
    <!--  lay-id 属性 用于 tab 子项定位。 -->
    <div class="layui-tab" lay-filter="demo" style="width: 300px">
      <ul class="layui-tab-title">
        <li class="layui-this" lay-id="111">文章列表</li>
        <li lay-id="222">发送信息</li>
        <li lay-id="333">权限分配</li>
        <li lay-id="444">审核</li>
        <li lay-id="555">订单管理</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">1</div>
        <div class="layui-tab-item">2</div>
        <div class="layui-tab-item">3</div>
        <div class="layui-tab-item">4</div>
        <div class="layui-tab-item">5</div>
      </div>
    </div>

    <hr />

    <button id="btnadd">新增tab</button>
    <button id="btndel">删除333（权限分配tab）</button>
    <button id="btnchange">切换555（订单管理tab）</button>

    <hr />
    <hr />

    <h3>绑定自定义 Tab 元素</h3>
    <ul id="tabHeader">
      <li>标题1</li>
      <li>标题2</li>
      <li>标题3</li>
    </ul>
    <div id="tabBody">
      <div class="xxx">内容1</div>
      <div class="xxx">内容2</div>
      <div class="xxx">内容4</div>
    </div>

    <script src="/layui/dist/layui.js"></script>
    <script>
      layui.use(['element'], function () {
        var element = layui.element,
          $ = layui.$

        /**
         * @brief: 新增一个Tab选项；
         * @param {String} filter, tab元素的 lay-filter="value" 过滤器的值（value）
         * @param {String} options 新增标签项的配置项；
         * title, 选项卡标题；
         * content, 选项卡内容
         * id, 选项卡标题的 lay-id 属性值；
         */
        // element.tabAdd(filter, options);
        btnadd.onclick = function () {
          var tabItem0 = {
            title: '新增item标题',
            content: '新增选项内容',
            id: 'pbs957',
          }
          element.tabAdd('demo', tabItem0)
        }

        /**
         * @brief: 删除一个Tab选项；
         * @param {String} filter, tab元素的 lay-filter="value" 过滤器的值（value）
         * @param {String} layid 选项卡标题列表的 属性 lay-id 的值；
         */
        // element.tabDelete(filter, layid)
        btndel.onclick = function () {
          element.tabDelete('demo', '333')
        }

        // 参数同 tabDelete
        // element.tabChange(filter, layid);
        btnchange.onclick = function () {
          element.tabChange('demo', '555')
        }

        /**
         * @brief: 绑定自定义 Tab 元素；
         * @param {Object} opt,
         * headerElem, 指定tab头元素项（子项）
         * bodyElem, 指定tab主体元素项（子项）
         * tips: 需要样式辅助；（demo 见 style 标签内）
         */
        // element.tab(opt)
        element.tab({
          headerElem: '#tabHeader>li',
          bodyElem: '#tabBody>.xxx',
        })
      })
    </script>
  </body>
</html>

